<template>
    <p>{{originalState.count}}</p>
    <button @click="addOriginalState">addOriginalState</button>
    <hr/>
    <p>{{readonlyState.count}}</p>
    <button @click="addReadonlyState">addReadonlyState</button>
</template>
<script setup>
import {ref,reactive,readonly} from 'vue';
const originalState = reactive({count:0});
const addOriginalState=()=>originalState.count++;
//当你想确保某个响应式对象或引用对象不被 意外修改的
//并且还能观察到它的变化的话可以使用only
const readonlyState = readonly(originalState);
//Readonly.vue:13 [Vue warn] Set operation on key "count" failed: target is readonly. Proxy(Object) {count: 25}

const addReadonlyState=()=>readonlyState.count++;

</script>